<template>
    <div class="fillcontain per">
        <head-top></head-top>
        <!-- <div class="table_container"> -->
        <!--表格头部-->
        <!-- <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="人员信息">
            <el-input placeholder="请输入人员信息" v-model="queryParams.query"></el-input>
          </el-form-item>
          <el-form-item label="人员编号">
            <el-input placeholder="请输入人员编号" v-model="queryParams.userId"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="selectSubmit">查询</el-button>
          </el-form-item>
          <el-button
            class="filter-item"
            style="margin-left: 20px;"
            type="success"
            icon="el-icon-edit"
            @click="dialogStatus= 'create';dialogVisible = true;resetForm('ruleForm');"
          >添加</el-button>
        </el-form>
        <el-table :data="tableData" highlight-current-row style="width: 100%">
          <el-table-column prop="id" label="编号" fixed></el-table-column>
          <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
          <el-table-column prop="pinName" label="简写" width="90"></el-table-column>
          <el-table-column prop="deptId" label="部门编号" sortable width="120"></el-table-column>
          <el-table-column prop="dept_name" label="部门" width="90"></el-table-column>
          <el-table-column prop="accountType" label="账号类型" width="120"></el-table-column>
          <el-table-column prop="tel" label="手机号" width="140">
            <template slot-scope="scope">{{scope.row.tel}}</template>
          </el-table-column>
          <el-table-column prop="postId" label="职务" width="90"></el-table-column>
          <el-table-column prop="sex" label="性别" width="90"></el-table-column>
          <el-table-column prop="incumbency" label="状态" width="90"></el-table-column>
          <el-table-column prop="wages" label="工资" sortable width="90"></el-table-column>
          <el-table-column prop="entryDate" label="入职日期" width="120"></el-table-column>
          <el-table-column prop="quitDate" label="离职日期" width="120"></el-table-column>
          <el-table-column prop="correctionDate" label="转正日期" width="120"></el-table-column>
          <el-table-column prop="headImg" label="转正日期" width="120"></el-table-column>
          <el-table-column prop="birthdate" label="生日" width="120"></el-table-column>
          <el-table-column prop="idCard" label="身份证号码" width="140"></el-table-column>
          <el-table-column prop="urgentTel" label="紧急联系方式" width="140"></el-table-column>
          <el-table-column prop="urgentName" label="紧急联系人" width="140"></el-table-column>
          <el-table-column prop="otherTel" label="其他联系方式" width="140"></el-table-column>
          <el-table-column prop="idCardAddr" label="证件地址" width="120"></el-table-column>
          <el-table-column prop="liveAddr" label="居住地址" width="120"></el-table-column>
          <el-table-column prop="bankCard" label="银行卡号" width="120"></el-table-column>
          <el-table-column prop="openingBank" label="开户行" width="120"></el-table-column>
          <el-table-column prop="openingName" label="开户名" width="120"></el-table-column>
          <el-table-column prop="remark" label="备注" width="120"></el-table-column>
          <el-table-column prop="stat" label="是否有效" width="120"></el-table-column>
          <el-table-column prop="idCardImgPositive" label="身份证正面" width="140"></el-table-column>
          <el-table-column prop="idCardImgBack" label="身份证反面" width="140"></el-table-column>
          <el-table-column prop="postName" label="是否有效" width="120"></el-table-column>
          <el-table-column prop="healthCertificateId" label="健康证编号" width="150"></el-table-column>
          <el-table-column prop="aborContractId" label="劳动合同编号" width="150"></el-table-column>
          <el-table-column prop="socialSecurityId" label="社保编号" width="150"></el-table-column>
          <el-table-column property="insertTime" sortable label="创建时间" width="150"></el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope" fixed="right">
              <el-button
                type="primary"
                size="mini"
                @click="handleUpdate(scope.row.id);dialogStatus= 'update';"
              >编辑</el-button>
              <el-button type="danger" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table> -->
        <!--添加数据-->
        <!-- <el-dialog
          :visible.sync="dialogVisible"
          title="添加员工信息"
          :close-on-click-modal="false"
          width="50%"
        >
          <el-form
            ref="userFormRef"
            :model="addUserInfo"
            :rules="formUserRules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="人员编号" prop="id">
              <el-input v-model="addUserInfo.id"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="addUserInfo.userName"></el-input>
            </el-form-item>
            <el-form-item label="拼音首字母" prop="pinName">
              <el-input v-model="addUserInfo.pinName" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="部门编号" prop="deptId">
              <el-input v-model="addUserInfo.deptId"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="dept_name">
              <el-input v-model="addUserInfo.dept_name"></el-input>
            </el-form-item>
            <el-form-item label="账号类型" prop="accountType">
              <el-select v-model="addUserInfo.accountType">
                <el-option
                  v-for="item in type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
              <el-input v-model.number="addUserInfo.tel"></el-input>
            </el-form-item>
            <el-form-item label="职务">
              <el-input v-model="addUserInfo.postId"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="addUserInfo.sex" label="1">男</el-radio>
              <el-radio v-model="addUserInfo.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="状态" prop="incumbency">
              <el-select v-model="addUserInfo.incumbency">
                <el-option
                  v-for="item in sta_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工资">
              <el-input v-model="addUserInfo.wages"></el-input>
            </el-form-item>
            <el-form-item label="入职日期" prop="entryDate">
              <el-date-picker
                v-model="addUserInfo.entryDate"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="离职日期">
              <el-date-picker
                v-model="addUserInfo.quitDate"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="转正日期">
              <el-date-picker
                v-model="addUserInfo.correctionDate"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/v1/addimg/shop'"
                :show-file-list="false"
                :on-success="handleShopAvatarScucess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="addUserInfo.headImg"
                  :src="baseImgPath + addUserInfo.headImg"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="生日">
              <el-date-picker v-model="addUserInfo.birthdate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="身份证号码">
              <el-input v-model="addUserInfo.idCard"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系电话">
              <el-input v-model="addUserInfo.urgent_phone"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人">
              <el-input v-model="addUserInfo.urgent_people"></el-input>
            </el-form-item>
            <el-form-item label="其他联系方式">
              <el-input v-model="addUserInfo.otherTel"></el-input>
            </el-form-item>
            <el-form-item label="证件地址">
              <el-input v-model="addUserInfo.idCardAddr"></el-input>
            </el-form-item>
            <el-form-item label="居住地址">
              <el-input v-model="addUserInfo.liveAddr"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号">
              <el-input v-model="addUserInfo.bankCard"></el-input>
            </el-form-item>
            <el-form-item label="开户行">
              <el-input v-model="addUserInfo.openingBank"></el-input>
            </el-form-item>
            <el-form-item label="开户名">
              <el-input v-model="addUserInfo.openingName"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="addUserInfo.remark"></el-input>
            </el-form-item>
            <el-form-item label="是否有效" prop="stat">
              <el-radio class="radio" v-model="addUserInfo.stat" label="3">是</el-radio>
              <el-radio class="radio" v-model="addUserInfo.stat" label="4">否</el-radio>
            </el-form-item>
            <el-form-item label="其他联系方式">
              <el-input v-model="addUserInfo.other_phone"></el-input>
            </el-form-item>
            <el-form-item label="身份证正面">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/v1/addimg/shop'"
                :show-file-list="false"
                :on-success="handleShopAvatarScucess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="addUserInfo.idCardImgPositive"
                  :src="baseImgPath + addUserInfo.idCardImgPositive"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="身份证反面">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/v1/addimg/shop'"
                :show-file-list="false"
                :on-success="handleShopAvatarScucess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="addUserInfo.idCardImgBack"
                  :src="baseImgPath + addUserInfo.idCardImgBack"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="健康证编号">
              <el-input v-model="addUserInfo.healthCertificateId"></el-input>
            </el-form-item>
            <el-form-item label="劳动合同编号" prop="contract_id">
              <el-input v-model="addUserInfo.contract_id"></el-input>
            </el-form-item>
            <el-form-item label="社保编号">
              <el-input v-model="addUserInfo.aborContractId"></el-input>
            </el-form-item>
            <el-form-item label="新增时间">
              <el-date-picker
                v-model="addUserInfo.insertTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
              ></el-date-picker>
            </el-form-item>

            <el-form-item class="button_submit">
              <el-button type="primary" @click="submitForm('addUserInfo')">立即添加</el-button>
              <el-button type="info" @click="close">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.page"
            :page-size="queryParams.limit"
            layout="prev, pager, next, jumper"
            :total="400"
          ></el-pagination>
        </div>
      </div> -->
        <div>暂无权限,无法访问</div>
    </div>

</template>

<script>
    // import { getUserTab, adduserInfo, deleteUser, updateUser } from "../api/common";
    // import moment from "moment";
    // import { baseUrl, baseImgPath } from "@/config/env";

    // export default {
    //   components: {},
    //   data() {
    //     return {
    //       // 模态框显示隐藏
    //       dialogVisible: false,
    //       baseUrl,
    //       baseImgPath,
    //       // 表格数据
    //       tableData: [],
    //       // 表单数据
    //       addUserInfo: {
    //         id: "", //人员编号
    //         userName: "", //用户名
    //         pinName: "", //拼音首拼
    //         deptId: "", //部门编号
    //         dept_name: "", //部门名称
    //         accountType: "内部", //账号类型
    //         tel: "", //手机号
    //         postId: "", //职务
    //         sex: "1", //性别
    //         incumbency: "正式", //状态
    //         wages: 0,
    //         entryDate: "", //入职日期
    //         quitDate: "", //离职日期
    //         correctionDate: "", //转正日期
    //         headImg: "", //头像
    //         birthdate: "", //生日
    //         idCard: "", //身份证号码
    //         urgentTel: "", //紧急联系电话
    //         urgentName: "", //紧急联系人
    //         otherTel: "", //其他联系方式
    //         idCardAddr: "", //证件地址
    //         liveAddr: "", //居住地址
    //         bankCard: "", //银行卡号
    //         openingBank: "", //开户行
    //         openingName: "", //开户名
    //         remark: "", //备注
    //         stat: "3", //是否有效
    //         other_phone: "", //其他联系方式
    //         idCardImgPositive: "", //身份证正面
    //         idCardImgBack: "", //身份证反面
    //         healthCertificateId: "", //健康证编号
    //         aborContractId: "", //劳动合同编号
    //         socialSecurityId: "", //设保编号
    //         insertTime: "" //新增时间
    //       },
    //       // 表单验证规则
    //       formUserRules: {
    //         id: [{ required: true, message: "请输入人员编号", trigger: "blur" }],
    //         userName: [
    //           { required: true, message: "请输入人员姓名", trigger: "blur" }
    //         ],
    //         pinName: [{ required: true, message: "请输入首字母", trigger: "blur" }],
    //         deptId: [
    //           { required: true, message: "请输入部门编号", trigger: "blur" }
    //         ],
    //         accountType: [
    //           { required: true, message: "请输入账号类型", trigger: "blur" }
    //         ],
    //         tel: [
    //           { required: true, message: "请输入联系电话" },
    //           { type: "number", message: "电话号码必须是数字" }
    //         ],
    //         sex: [
    //           { required: true, message: "请输入性别" },
    //           { type: "String", message: "男或女" }
    //         ],
    //         incumbency: [
    //           { required: true },
    //           { type: "String", message: "请选择状态" }
    //         ],
    //         entryDate: [
    //           { required: true },
    //           {
    //             type: "String",
    //             message: "请选择入职时间"
    //           }
    //         ],
    //         stat: [{ required: true }]
    //       },
    //       // 员工类型
    //       type_options: [
    //         {
    //           value: "内部",
    //           label: "内部"
    //         },
    //         {
    //           value: "客户",
    //           label: "客户"
    //         },
    //         {
    //           value: "设备",
    //           label: "设备"
    //         }
    //       ],
    //       // 员工状态
    //       sta_options: [
    //         {
    //           value: "试用",
    //           label: "试用"
    //         },
    //         {
    //           value: "正式",
    //           label: "正式"
    //         },
    //         {
    //           value: "辞职",
    //           label: "辞职"
    //         },
    //         {
    //           value: "辞退",
    //           label: "辞退"
    //         }
    //       ],

    //       //获取表格数据条件
    //       queryParams: {
    //         //
    //         query: "",
    //         userId: "",
    //         page: 1,
    //         limit: 10
    //       }
    //     };
    //   },
    //   created() {
    //     this.fetchData();
    //   },
    //   methods: {
    //     // 获取表格数据
    //     fetchData() {
    //       getUserTab(this.queryParams).then(res => {
    //         console.log(res);
    //         this.tableData = res.data;
    //       });
    //     },
    //     // 改变每页显示数据
    //     handleSizeChange(val) {
    //       this.queryParams.limit = val;
    //       this.fetchData();
    //     },
    //     // 改变页码
    //     handleCurrentChange(val) {
    //       console.log(val);
    //       this.queryParams.page = val;
    //       this.fetchData();
    //     },
    //     //根据条件查询数据
    //     selectSubmit() {
    //       this.fetchData();
    //     },
    //     resetForm(formName) {
    //       this.$nextTick(() => {
    //         this.$refs[formName].clearValidate();
    //       });
    //     },

    //     // 关闭弹窗
    //     close() {
    //       this.dialogVisible = false;
    //       this.$refs.userFormRef.resetFields();
    //     },
    //     // 表单提交
    //     submitForm() {
    //       this.$refs.userFormRef.validate(valid => {
    //         console.log(valid);
    //         if (valid) {
    //           if (this.dialogStatus === "create") {
    //             adduserInfo(this.addUserInfo).then(res => {
    //               console.log(res);
    //               // if (res.code === 200) {
    //               //   this.$notify({
    //               //     title: "成功",
    //               //     type: "success",
    //               //     message: res.msg,
    //               //     duration: 2000
    //               //   });
    //               //   this.dialogVisible = false;
    //               //   this.fetchData();
    //               // } else {
    //               //   this.$notify({
    //               //     title: "失败",
    //               //     type: "error",
    //               //     message: res.msg,
    //               //     duration: 2000
    //               //   });
    //               // }
    //             });
    //           }
    //           if (this.dialogStatus === "update") {
    //             updatePost(this.ruleForm).then(res => {
    //               let title;
    //               let type;
    //               if (res.code === 200) {
    //                 this.$notify({
    //                   title: "成功",
    //                   type: "success",
    //                   message: res.msg,
    //                   duration: 2000
    //                 });
    //                 this.dialogVisible = false;
    //                 this.queryParams.id = null;
    //                 this.fetchData();
    //               } else {
    //                 this.$notify({
    //                   title: "失败",
    //                   type: "error",
    //                   message: res.msg,
    //                   duration: 2000
    //                 });
    //               }
    //             });
    //           }
    //         }
    //       });
    //     },

    //     // 获取单条员工信息
    //     handleUpdate(id) {
    //       this.dialogVisible = true;
    //       this.queryParams.id = id;
    //       postInfo(this.queryParams).then(res => {
    //         if (res.code === 200) {
    //           this.ruleForm = res.data[0];
    //         }
    //       });
    //     },

    // 删除用户
    //     deleteUser(id) {
    //       console.log(id);
    //     }
    //   }
    // };
</script>


<style lang="less">
    @import "../style/mixin";
    .table_container {
        padding: 20px;
    }
    .per{
        text-align: center;
        padding-top: 20%;
    }
</style>
